<template>
<div>
  <!-- 头部导航 -->
  <div>
    <van-nav-bar fixed>
      <template #left>
        <img src="@/assets/app.png" class="logo" alt="">
      </template>
      <template #right>
        <van-icon name="search" size="0.60rem" color='#fff' @click="moveSearchPageFn"/>
      </template>
    </van-nav-bar>
  </div>
  <!-- tab 栏导航 -->
  <div class="main">
      <van-tabs v-model="channelId"
      @change="channelChangeFn" animated sticky offset-top='1.226667rem'>

        <van-tab :title="obj.name"
        v-for="obj in userChannelList"
        :key="obj.id"
        :name="obj.id">

        <ArticleList :channelId='channelId'></ArticleList>
        </van-tab>
      </van-tabs>
      <!-- 编辑频道图标 -->
      <van-icon name="plus" size="0.37333334rem" class="moreChannels" @click="plusClickFn"/>
  </div>
  <!-- 频道管理弹出层 -->
  <van-popup class="channel_popup" v-model="show">
    <ChannelEdit
    :userList="userChannelList"
    :unCheckList="unCheckChannelList"
    @addChannelEV="addChannelFn"
    @removeChannelEV="removeChannelFn"
    @closeEV="closeFn"
    ref="editRef"
    v-model="channelId"
    ></ChannelEdit>
  </van-popup>
</div>
</template>

<script>
import {
  getAllChannelsAPI,
  getUserChannelsAPI,
  updateChannelsAPI,
  removeTheChannelsAPI
} from '@/api'
import ArticleList from './components/ArticleList.vue'
import ChannelEdit from './ChannelEdit.vue'
export default {
  data () {
    return {
      channelId: 0, // tab栏导航,默认频道id为0
      userChannelList: [], // 用户选择频道列表
      allChannelList: [], // 所有频道列表
      // articleList: [] // 文章列表
      show: false // 频道弹出层显示隐藏
    }
  },
  async created () {
    // 频道列表
    const res = await getUserChannelsAPI()
    this.userChannelList = res.data.data.channels
    // this.channelChangeFn()
    // 所有频道列表
    const res2 = await getAllChannelsAPI()
    this.allChannelList = res2.data.data.channels
  },
  components: {
    ArticleList,
    ChannelEdit
  },
  methods: {
    // tabs 切换事件
    async channelChangeFn () {
    // 文章列表
      // const res2 = await getAllArticleListAPI({
      //   channel_id: this.channelId,
      //   timestamp: (new Date()).getTime()
      // })
      // console.log(res2)
      // this.articleList = res2.data.data.results
    },
    // + 点击添加频道方法
    plusClickFn () {
      this.show = true
    },
    // 添加频道
    async addChannelFn (channelObj) {
      this.userChannelList.push(channelObj)

      const newArr = this.userChannelList.filter(obj => obj.id !== 0)
      const theNewArr = newArr.map((obj, index) => {
        const newObj = { ...obj }
        delete newObj.name
        newObj.seq = index

        return newObj
      })
      const res = await updateChannelsAPI({
        channels: theNewArr
      })
      console.log(res)
    },
    // 删除频道
    async removeChannelFn (channelObj) {
      const index = this.userChannelList.findIndex(obj => obj.id === channelObj.id)
      this.userChannelList.splice(index, 1)
      const res = await removeTheChannelsAPI({
        channelId: channelObj.id
      })
      console.log(res)
    },
    // 关闭弹出层
    closeFn () {
      this.show = false
      // 让内部编辑状态回归false
      this.$refs.editRef.isEdit = false
    },
    // 搜索跳转
    moveSearchPageFn () {
      this.$router.push('/search')
    }

  },
  computed: {
    unCheckChannelList () {
    //   const newArr = this.allChannelList.filter(bigObj => {
    //     const index = this.userChannelList.findIndex(smallObj => {
    //       return smallObj.id === bigObj.id
    //     })
    //     if (index > -1) {
    //       return false
    //     } else {
    //       return true
    //     }
    //   })
    //   return newArr
    // }
      return this.allChannelList.filter(bigObj => (this.userChannelList.findIndex(smallObj => smallObj.id === bigObj.id) === -1))
    }
  }

}
</script>

<style scoped lang='less'>
.logo {
    width: 130px;
    height: 40px;
}
.main {
  padding-top: 46px;
}
// 设置 tabs 容器的样式
/deep/ .van-tabs__wrap {
  padding-right: 30px;
  background-color: #fff;
}

// 设置小图标的样式
.moreChannels {
  position: fixed;
  color: skyblue;
  top: 62px;
  right: 8px;
  z-index: 999;
}
.channel_popup {
  width: 100vw;
  height: 100vh;
}
</style>
